<template>
          <section class="content">
            <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" >
        <el-form-item>测点1：
          <el-select v-model="queryPointlist1" clearable placeholder="请选择" @change="selectKey">
            <el-option v-for="item in queryPoint1" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
          时间：
          <el-date-picker
            v-model="date1"
            type="daterange"
            align="right"
            unlink-panels
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions1"
            @change="timefirst1"
          ></el-date-picker>
          数据类型：
          <el-select v-model="typeid1" clearable placeholder="全部">
            <el-option v-for="item in type1" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
			</el-form>
      	<el-form :inline="true" >
        <el-form-item>测点2：
          <el-select v-model="queryPointlist2" clearable placeholder="请选择" @change="selectKey1">
            <el-option v-for="item in queryPoint2" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
          时间：
          <el-date-picker
            v-model="date2"
            type="daterange"
            align="right"
            unlink-panels
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions2"
            @change="timefirst2"
          ></el-date-picker>
          数据类型：
          <el-select v-model="typeid2" clearable placeholder="全部">
            <el-option v-for="item in type2" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="inquire">对比</el-button>
        </el-form-item>
			</el-form>
		</el-col>

          <el-col :span="24" class="bc-w">
            <el-col :span="12" class="chart-plane">
              <div class="chartLine" id="chartLine"></div>
            </el-col>
            <el-col :span="12" class="chart-plane">
              <div class="chartLine" id="chartLine1"></div>
            </el-col>
          </el-col>
    </section>
</template>
<script >
import echarts from "echarts";
export default {
    data(){
        return{
            chartLine: null,
            chartLine1: null,
            projectId:'',
            queryPoint1: [],
            queryPoint2: [],
            queryPointlist1: null,
            queryPointlist2: null,
            xAxis: [],
            series: [],
            xAxis1: [],
            series1: [],
            date1: [],
            date2: [],
            type1:[
              {id:1,name:"设备数据"},
              {id:2,name:"人工数据"}
            ],
            type2:[
              {id:1,name:"设备数据"},
              {id:2,name:"人工数据"}
            ],
            typeid1: '',
            typeid2: '',
            pickerOptions1: {
              //仅当天前时间
              disabledDate(time) {
                  return time.getTime() > Date.now() - 8.64e6
              },
              shortcuts: this.shortcuts
            },
            pickerOptions2: {
              //仅当天前时间
              disabledDate(time) {
                  return time.getTime() > Date.now() - 8.64e6
              },
              shortcuts: this.shortcuts
            },
        }
    },
    methods: {
      timefirst1(t){
        this.date1 = t
      },
      timefirst2(t){
        this.date2 = t
      },
      selectKey(id) {
        this.id = id;
        let obj = {};
        obj = this.type1.find(item => {
          return item.id === id;
          this.id = obj.id;
        });
      },
      selectKey1(id) {
        this.id = id;
        let obj = {};
        obj = this.type2.find(item => {
          return item.id === id;
          this.id = obj.id;
        });
      },
      inquire(){
        let data = {
          id:this.queryPointlist1,
          beginDate:this.date1[0],
          endDate:this.date1[1],
          type:this.typeid1
        }
        
        this.projectModel
        .collectData(data)
        .then(res => {
          this.xAxis = res.data.xAxis.data;
          this.series = res.data.series;
          this.drawCharts()
        })
        .catch(err => {
          console.log(err.message);
        });
        
        let data1 = {
          id:this.queryPointlist2,
          beginDate:this.date2[0],
          endDate:this.date2[1],
          type:this.typeid2
        }
        this.projectModel
        .collectData(data1)
        .then(res => {
          
          this.xAxis1 = res.data.xAxis.data;
          this.series1 = res.data.series;
          this.drawCharts()
        })
        .catch(err => {
          console.log(err.message);
        });
        
    },
      drawLineChart() {
        this.chartLine = echarts.init(document.getElementById("chartLine"));
       this.chartLine1 = echarts.init(document.getElementById("chartLine1"));
        var _this = this;
        var series = [];
        
        for (var i = 0; i < _this.series.length; i++) {
          series.push({
            name: _this.series[i].name,
            type: "line",
            data: _this.series[i].value,
            velocity: _this.series[i].velocity
          });
        }
        var series1 = [];
        for (var i = 0; i < _this.series1.length; i++) {
          series1.push({
            name: _this.series1[i].name,
            type: "line",
            data: _this.series1[i].value,
            velocity1: _this.series1[i].velocity
          });
        }
        this.chartLine.setOption(
          {
            title: {
              text: this.series[0].name+"和"+ this.series1[0].name+"  "+"数据对比沉降曲线图",
              left: "center"
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow"
              }
            },
            legend: {
              top: 30,
              data: [this.series[0].name, this.series1[0].name]
            },
            toolbox: {
            orient: 'vertical',
            show: true,
            itemSize: 16,
            feature: {
              restore: {},
              saveAsImage: {}
            }
          },
            xAxis: [
              {
                name: `
                日期`,
                type: "category",
                boundaryGap: true,
                data: _this.xAxis
              }
            ],
            yAxis: [
              {
                name: `
              
              累计变化量(mm)
              
              `,
                type: "value"
              }
            ],
            series: [
              {name: this.series[0].name,
              type: "line",
              data: this.series[0].value,
              smooth: false
              },
              {name: this.series1[0].name,
              type: "line",
              data: this.series1[0].value,
              smooth: false
              }
            ]
          }
        );
        this.chartLine1.setOption(
          {
            title: {
              text: this.series[0].name+"和"+ this.series1[0].name+"  "+"数据对比沉降速率图",
              left: "center"
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow"
              }
            },
            legend: {
              top: 30,
              data: [this.series[0].name, this.series1[0].name]
            },
            toolbox: {
              orient: 'vertical',
              show: true,
              itemSize: 10,
              feature: {
                dataZoom: { yAxisIndex: "none" },
                restore: {},
                dataView: { readOnly: false }, //数据视图
                saveAsImage: {}
              }
            },
            xAxis: [
              {
                name: `
                日期`,
                type: "category",
                boundaryGap: true,
                data: _this.xAxis,
              }
            ],
            yAxis: [
              {
                name: `
              
              变形速率控制值(mm/d)
              
              `,
                type: "value"
              }
            ],
            series: [
              {name: this.series[0].name,
              type: "line",
              data: this.series[0].velocity,
              smooth: false
              },
              {
                name: this.series1[0].name,
              type: "line",
              data: this.series1[0].velocity1,
              smooth: false
              }
            ]
          }
        );
      },
      drawCharts() {
        this.drawLineChart();
      },
      date() {
            const end = new Date();
		        var seperator1 = "-";
		        var year = end.getFullYear();
		        var month = end.getMonth()+1;
		        var strDate = end.getDate();
		        if (month >= 1 && month <= 9) {
		            month = "0" + month;
		        }
		        if (strDate >= 0 && strDate <= 9) {
		            strDate = "0" + strDate;
            }
            
            var endDate= year + seperator1 + month + seperator1 + strDate;
            const start = new Date();
            var startYear = start.getFullYear()-5;
            var startMonth = start.getMonth()+1;
            var startDate = start.getDate();
            if (startMonth >= 1 && startMonth <= 9) {
		            startMonth = "0" + startMonth;
		        }
		        if (startDate >= 0 && startDate <= 9) {
		            startDate = "0" + startDate;
            }
            var startDat = startYear + seperator1 + startMonth + seperator1 + startDate;

            this.date1 = [startDat,endDate]
            this.date2 = [startDat,endDate]
      },
    },
  mounted() {
    
    this.projectId = this.$route.query.projectId;
    this.date();

    let data = {
      projectId: this.projectId,
      monitorItemId: "8",
      resultType: "1"
    };
    this.projectModel
      .queryPoint(data)
      .then(res => {
        ;
        this.queryPoint1 = res.data;

        this.queryPoint2 = res.data;
        if(this.queryPoint2.length > 1) {
          this.queryPointlist1 = this.queryPoint1[0].id;
          this.queryPointlist2 = this.queryPoint2[1].id;
          this.inquire();
        }
      })
      .catch(err => {
        console.log(err.message);
      });
      this.inquire()
  }
};
</script>


<style scoped>
.content {
  padding-top: 20px;
  background-color: #ffffff;
  min-height: 680px;
}
.bc-w {
  width: 100%;
  height: calc(100% - 90px);
  padding: 10px;
}
.chart-plane {
  height: 100%;
}
.chartLine {
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  padding: 10px;
}
.select-w-100{
  width: 100px;
}
</style>
